<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
	<link rel="shortcut icon" href="images/favicon.ico">
	<link rel="stylesheet" type="text/css" href="css/ccc.css">
	
</head>
<body>
	<header class="header">
		<!-- 头部左边背景 -->
		<div class="bg"></div>
		<!-- 头部右边链接 -->
		<div class="links">
			<a href="#">了解更多</a>|
			<a href="#">反馈意见</a>
		</div>
	</header>
	<!-- 内容区 -->
	<section class="content">
		<!-- 内容区头 -->
		<header class="content-tit">
			<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
		</header>
		<!-- 内容区体 -->
		<div class="mainBody-wrapper">

			<!-- 内容区左边 -->
			<div class="mainBody">
				<div class="regTabs">
					<ul>
					 	<li><a href="#" style="color:#fff; font-weight:bold;">注册字母邮箱</a></li>
					 	<li><a href="#">注册手机号码邮箱</a></li>
					 	<li><a href="#">注册VIP邮箱</a></li>
					</ul>
				</div>

				<!-- 注册窗 -->
				<div class="fegForm">
					<!-- 邮件地址 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>邮件地址
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt">
							<strong style="font-weight:bold;">@</strong>
							<select>
								<option selected="selected">163.com</option>
							</select>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
							</div>
						</dd>
					</dl>
					<!-- 密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>密码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">6~16个字符，区分大小写</span>
							</div>
						</dd>
					</dl>

					<!-- 确认密码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>确认密码
						</dt>
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">
							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">请再次填写密码</span>
							</div>
						</dd>
					</dl>

					<!-- 手机号码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>手机号码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" id="phone" value="+86" style="color:#999;width:322px;">

								<div class="itlSelect">
								<a href="#" class="flag-CN"><em></em>中国  +86</a>
                                <a href="#" class="flag-AL"><em>&nbsp;</em>  阿尔巴尼亚(Shqipëria) +355</a>
                                <a href="#" class="flag-DZ"><em>&nbsp;</em>阿尔及利亚(People's Democratic Republic of Algeria) +213</a>
                                <a href="#" class="flag-AF"><em>&nbsp;</em>阿富汗(Republic of Afghanistan) +93</a>
                                <a href="#" class="flag-AR"><em>&nbsp;</em>阿根廷(Argentina) +54</a>
                                <a href="#" class="flag-AE"><em>&nbsp;</em>阿拉伯联合大公国(The United Arab Emirates) +971</a>
                                <a href="#" class="flag-AW"><em></em>阿鲁巴(Aruba) +297</a>
                                <a href="#" class="flag-OM"><em></em>阿曼(Sultanate of Oman) +968</a>
							</div>
							<div class="itl">
								<div class="itl-flag" id="itl-flags">
									<em></em>
								</div>
							</div>
							

							<!-- 提示语 -->
							<div class="tips">
								<span class="txt-tips">忘记密码时，可以通过该手机号码快速找回密码</span>
							</div>
						</dd>
					</dl>

					<!-- 验证码 --> 
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title" style="top:22px;">
							<span class="txt-impt">*</span>验证码
						</dt>

						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt" style="width: 196px; position:relative; top:0px;">
							<img src="images/call.jpg" class="vCode">
							<a href="#" class="switchvCode" tabindex="-1">看不清楚？换张图片</a>

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请填写图片中的字符，不区分大小写</span>
							</div>
							<div class="btns">
								<a class="btn"><strong>免费获取验证码</strong></a>
							</div>
						</dd>
					</dl>

					<!-- 短信验证码 -->
					<dl class="regForm-item">
						<!-- 输入文本框 -->
						<dt class="regForm-title">
							<span class="txt-impt">*</span>短信验证码
						</dt>
						
						<dd class="regForm-ct">
							<!-- 输入文本框 -->
							<input type="text" class="ipt norWidthIpt">

							<!-- 输入提示 -->
							<div class="tips">
								<span class="txt-tips">请查收手机短信，并填写短信中的验证码</span>
							</div>
						</dd>
					</dl>

					<!-- 条款 -->
					<dl class="regForm-item">
						<dd class="regForm-ct txt-tips">
							<label></label>
							<input type="checkbox" checked="checked" tabindex="-1">
							"同意"
							<a href="#">"服务条款"</a>
							"和"
							<a href="#">"隐私相关政策"</a>
						</dd>
					</dl>

					<!-- 按钮 -->
					<dl class="regForm-item">
						<dd class="regForm-ct">
							<a class="btnReg">立即注册</a>
						</dd>
					</dl>

				</div>
				
			</div>

			<!-- 内容区右边 -->
			<div class="mainBody-side">
				<div class="regExt">
					<img src="images/reg_master.gif" />
				</div>
			</div>
		</div>
	</section>

	<script type="text/javascript">

//号码输入框  国旗的显示和隐藏
function switchFlag(){
   var flag =document.querySelector('.itl');
   console.log(flag);
//为flag设定一个单机事件，单机后执行一个函数
   flag.addEventListener('click',function(e){
//谁是响应点击事件
   var d=e.target;
   var itlSelect =document.querySelector('.itlSelect');
//三元运算符，和if eles 同理
    itlSelect.style.display==='none'?itlSelect.style.display='block':itlSelect.style.display='none';
})
   }

switchFlag();

    function swichTab(){
//找到类名为regTabs里面的所有ul里面的所有li里的a标签
    var tabs =document.querySelectorAll('.regTabs ul li a');
    var ul =document.querySelector('.regTabs ul');
    console.log(ul);
    for(var i=0;i<tabs.length;i++){
    	tabs[i].index =i;
    	tabs[i].addEventListener('click',function(e){
    		var a=e.target;
    		console.log(a.index);
    		ul.style.background ='url(images/tab.jpg) no-repeat o -'+a.index*56+'px';

    		for(var j=0;j<tabs.length;j++){
    			tabs[j].style.color='#000';

    		}
    		a.style.color='#fff';
    	})
    }


    }

	function itlSelect(){
    //找到下拉列表的A标签
	var links=document.querySelectorAll('.itlSelect');



    //给找到的A标签  绑定单击事件
	for (i = 0; i < links.length; i++) {
		links[i].addEventListener('click',function(e){
			var a=e.target;
           //获取A标签的文本内容
			var txt=a.innerText;

           //获取A标签的class类名
			var cls=a.className;

			console.log(txt+"--"+cls);

			//获取“+”所在的位置


			//截取字符串，获取“地区编码值”
            var area=txt.substr(txt.indexOf("+"), txt.length -  txt.indexOf("+"));

			//设置输入框 地区编码值
			document.querySelector('#phone').setAttribute('value',area);


		    //设置input输入的国旗标志
		    var p=document.querySelector('.itl-flag');
		    p.className=" itl-flag "+cls;


		    

        


		})
	}
}
itlSelect();

	</script>


</body>
</html>